<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            height: 200px;
            border: 1px solid green;
            margin: 100px auto;
            position: relative;
        }

        .son {
            position: absolute;
            bottom: 0px;

        }
    </style>
</head>

<body>
    <script>
        // 1. 不管如何动态化：大div有1个（父盒子）
        document.write('<div class="box">');

        // 2. 获取柱子的数量
        let num = +prompt('请输入柱子的数量');

        // 3. 计算柱子的宽度
        let width = 1200 / (2 * num + 1);

        // 4. 每次产生1个柱子：需要产生的数量不确定（循环）
        for (let i = 1; i <= num; i++) {
            // 4.1 给高度：随机父盒子高度
            let height = Math.ceil(Math.random() * 200);

            // 4.2 背景随机：rgb三色组
            let r = Math.ceil(Math.random() * 255);
            let g = Math.ceil(Math.random() * 255);
            let b = Math.ceil(Math.random() * 255);

            // 4.3 偏移量：(当前柱子的序号 i  * 2 - 1) * width
            let left = (i * 2 - 1) * width;


            // 4.4 产生柱子：div.son
            document.write(`
                <div class="son" style="width:${width}px;height:${height}px;background-color:rgb(${r},${g},${b});left:${left}px">
                </div>
            `);
        }


        // 5. 最后一步：关闭盒子div.box
        document.write('</div>');

        // 要完成当前案例
        // 1. 先静态效果找规律：1个柱子和2个柱子
        // 2. 1个柱子和2个柱子：有些样式是固定（定位），有些样式是变化的（JS动态实现）
        // 3. 两个公式：柱子宽度的算法，柱子的偏移量的算法
    </script>
</body>

</html>